<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"  />
		<title>轮播插件</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.a{
				height: 50px;
				width: 100px;
				border:1px solid #ccc;
				background: #eee;
			}
			a:focus{
				outline: none;
			}
		</style>
	</head>
	<body>
		<!--轮播插件-->
		<div  id="myCarousel" class="carousel slide" style="width: 440px;"> <!--我的轮播器--><!--data-ride="carousel" 自动轮播间隔5s-->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="images/a.jpg" alt="第一张"/>
					<div class="carousel-caption">
						<h3>Bootstrap</h3>
						<p>Bootstrap是一款HTML5响应式插件</p>
					</div>
				</div>
				<div class="item">
					<img src="images/b.jpg" alt="第二张"/>
					<div class="carousel-caption">
						<h3>jQuery</h3>
						<p>jQuery是一款Javascript的开发库</p>
					</div>
				</div>
				<div class="item">
					<img src="images/c.jpg" alt="第三张"/>
					<div class="carousel-caption">
						<h3>Extjs</h3>
						<p>Extjs是一款客户端js框架</p>
					</div>
				</div>
				<div class="item">
					<img src="images/d.jpg" alt="第四张"/>
					<div class="carousel-caption">
						<h3>HTML5</h3>
						<p>HTML5是一款最新的html</p>
					</div>
				</div>
			</div>
			<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
			<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
		</div>
		<button id="cycle" class="btn btn-default">开始</button>
		<button id="pause" class="btn btn-default">停止</button>
		<button id="three" class="btn btn-default">播放第三条</button>
		<button id="prev" class="btn btn-default">上一个</button>
		<button id="next" class="btn btn-default">下一个</button>
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script>
//			$("#myCarousel").carousel({
//				interval:'2000'
//			});
			$('#cycle').on('click',function(){
				$('#myCarousel').carousel('cycle');
			});
			$('#pause').on('click',function(){
				$('#myCarousel').carousel('pause');
			});
			$('#three').on('click',function(){
				$('#myCarousel').carousel(2);
			});
			$('#prev').on('click',function(){
				$('#myCarousel').carousel('prev');
			});
			$('#next').on('click',function(){
				$('#myCarousel').carousel('next');
			});
		</script>
	</body>
	
</html>
